<template>
  <div class="my-pdf-container">
    <div class="pdf-tools">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        :disabled="curPage === 1"
        @click="pre"
        size="small"
        >上一页</el-button
      >
      <p>正在预览 &nbsp;{{ curPage + "/" + total }}</p>
      <el-button
        type="primary"
        :disabled="curPage === total"
        @click="next"
        size="small"
        style="margin-left: auto"
      >
        下一页
        <i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
    </div> 
    <pdf
      :src="src"
      :page="curPage"
      style="disply: block; width: 100%"
      @loaded="loadPdfHandler"
    ></pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";

export default {
  name: "PdfView",
  components: {
    pdf,
  },
  props: {
    pdfUrl: {
      type: String,
      default: "",
    },
    recordId:{
      type: String,
      default: "",
    }
  },
  data() {
    return {
      curPage: 1,
      total: 0,
      src: null, 
      key:''
    };
  },
  created() {
    var that = this;
    this.key =this.recordId;
    console.log("pdfUrl:",this.pdfUrl);
    this.src = pdf.createLoadingTask(this.pdfUrl); 
    console.log("src:",this.src);
  },
  mounted() {
    var that = this;
    that.src.promise.then((pdf) => {
      that.total = pdf.numPages;
    });
  },
  methods: { 
    // pdf加载时
    loadPdfHandler(e) {
      var pdfViewCurpage = window.localStorage.getItem(
        "pdf-view-curpage-" + this.key
      );
      if (pdfViewCurpage) {
        this.curPage = pdfViewCurpage;
      }
    },
    pre() {
      this.curPage--;
      window.localStorage.setItem("pdf-view-curpage-" + this.key, this.curPage);
    },
    next() {
      this.curPage++;
      window.localStorage.setItem("pdf-view-curpage-" + this.key, this.curPage);
    },
    goTo(curPage) {
      this.$message({
                type: "success",
                message: "跳转到第 "+curPage+" 页",
              });
      this.curPage = curPage;
      window.localStorage.setItem("pdf-view-curpage-" + this.key, this.curPage);
    },
  },
};
</script>
<style lang="less">
.my-pdf-container {
  width: 100%;
  .pdf-tools {
    border-top: 1px solid #ddd;
    padding-top: 3px;
    padding-bottom: 2px;
    display: flex;
    position: fixed;
    bottom: 0px;
    z-index: 999;
    width: 1280px;
    margin: 0 auto;
    background: #fff;
    height: 30px;
    p {
      margin: 0px;
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: center;
    }
    .el-button {
      height: 30px;
      align-items: center;
    }
  }
}
</style>